<template>
	<view class="useing" style="background: url('../../static/server_mag/ser-back.png') no-repeat;">
		<view class="head">
			<view class="hi">
				<view style="font-size: 40rpx;font-weight:580;color: #3D3D3D; PingFang SC Heavy;">Hi~您好</view>
				<view style="font-size:30rpx;color: #3D3D3D; PingFang SC Bold;margin-top:16rpx">租机虫为您服务</view>
			</view>
			<view class="contact-btn">
				<view class='contact-list'>
					<contact-button size='30' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
					<contact-button size='30' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
					<contact-button size='30' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
					<contact-button size='30' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
				</view>
				<image mode='widthFix' src="../../static/server_mag/mesg.png" class="user-ads-rImg"></image>
				<text class='color-white' style="margin-top: 6rpx;">在线客服</text>
			</view>
		</view>
		<view class="itemInfo" :class="show == true ? 'navBarWrap' :''">
			<view class="itemInfo_item">
				<image src="../../static/server_mag/problem.png" mode="widthFix" class="itemInfo_itemPic"></image>
				<view style="color: #333333;font-size: 30rpx;">常见问题</view>
			</view>
			<view class="itemInfo_item">
				<image src="../../static/server_mag/pay.png" mode="widthFix" class="itemInfo_itemPic"></image>
				<view style="color: #333333;font-size: 30rpx;">支付问题</view>
			</view>
			<view class="itemInfo_item">
				<image src="../../static/server_mag/repair.png" mode="widthFix" class="itemInfo_itemPic"></image>
				<view style="color: #333333;font-size: 30rpx;">设备维修</view>
			</view>
			<view class="itemInfo_item">
				<image src="../../static/server_mag/safeguard.png" mode="widthFix" class="itemInfo_itemPic"></image>
				<view style="color: #333333;font-size: 30rpx;">租赁保障</view>
			</view>
		</view>

		<view class="guess">
			<view class="title">常见问题</view>
			<view class="list" v-for="(item,index) in quesson" :key="index">
				<view class="list-info">
					<span style="font-size: 30rpx;">{{item.text}}</span>
					<image style="width: 16rpx;" src="../../static/server_mag/right-to.png" mode="widthFix"></image>
				</view>
				<view v-show="quesson.length-index>1" style="border: 1rpx solid #E4E4E4;margin-top: 22rpx;"></view>
			</view>
		</view>

		<view class="guess">
			<view class="title">支付问题</view>
			<view class="list" v-for="(item,index) in quesson" :key="index">
				<view class="list-info">
					<span style="font-size: 30rpx;">{{item.text}}</span>
					<image style="width: 16rpx;" src="../../static/server_mag/right-to.png" mode="widthFix"></image>
				</view>
				<view v-show="quesson.length-index>1" style="border: 1rpx solid #E4E4E4;margin-top: 22rpx;"></view>
			</view>
		</view>

		<view class="guess">
			<view class="title">设备维修</view>
			<view class="list" v-for="(item,index) in quesson" :key="index">
				<view class="list-info">
					<span style="font-size: 30rpx;">{{item.text}}</span>
					<image style="width: 16rpx;" src="../../static/server_mag/right-to.png" mode="widthFix"></image>
				</view>
				<view v-show="quesson.length-index>1" style="border: 1rpx solid #E4E4E4;margin-top: 22rpx;"></view>
			</view>
		</view>

		<view class="guess">
			<view class="title">租赁保障</view>
			<view class="list" v-for="(item,index) in quesson" :key="index">
				<view class="list-info">
					<span style="font-size: 30rpx;">{{item.text}}</span>
					<image style="width: 16rpx;" src="../../static/server_mag/right-to.png" mode="widthFix"></image>
				</view>
				<view v-show="quesson.length-index>1" style="border: 1rpx solid #E4E4E4;margin-top: 22rpx;"></view>
			</view>
		</view>
		<view class="bm-ser">
			没有解决您的问题？
			<view style="color: #157AFE;display:inline-block;" @click="tellphone">联系客服</view>
		</view>
		<view style="height:30rpx"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quesson: [{
						text: '订单到期后设备如何归还',
						type: '1'
					},
					{
						text: '租期如何计算？',
						type: '2'
					},
					{
						text: '订单如何续租？',
						type: '3'
					}
				],
				show: false,
				phone: '400-085-0889',
			};
		},
		onShow() {},
		mounted() {},
		onLoad() {},
		onPageScroll(e) {
			console.log(e);
			if (e.scrollTop >= 130) {
				this.show = true
			} else if (e.scrollTop < 100) {
				this.show = false
			}
		},
		methods: {
			tellphone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.useing {
		height: 100vh;
		width: 100vw;
		min-height: 100vh;
		background-size: 100vw 100vh;
		background-color: #cbcbcb !important;

		.head {
			padding: 50rpx 36rpx;
			display: flex;

			.hi {
				flex: 2;
			}

			.contact-btn {
				padding: 0 20rpx;
				border-radius: 40rpx;
				color: #157AFE;
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #157AFE;
				background-color: transparent;
			}

			.contact-btn image {
				width: 40rpx;
				height: 48rpx;
				margin-top: 6rpx;
				margin-right: 10rpx;
			}

			.contact-list {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 80rpx;
				z-index: 100;
				overflow: hidden;
				opacity: 0;
			}
		}

		.navBarWrap {
			position: sticky;
			top: -1px;
			z-index: 999;
			margin: 0 !important;
			border-radius: 0px !important;
			background-image: none !important;
		}

		.itemInfo {
			height: 155rpx;
			margin: 30rpx 32rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			border-radius: 20rpx;

			.itemInfo_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
			}

			.itemInfo_itemPic {
				width: 60rpx;
				height: 60rpx;
			}
		}
		.bm-ser{
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.guess {
			background-color: #fff;
			height: 378rpx;
			margin: 30rpx 32rpx;
			border-radius: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				padding: 30rpx 0 0 32rpx;
			}

			.list {
				padding: 20rpx 32rpx 6rpx;

				.list-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
</style>
